<template>
  <div class="app-container" v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="name" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="NAME">
        <el-input v-model="form.NAME" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="出生年月" prop="BIRTHDAY">
        <el-input v-model="form.BIRTHDAY" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="DEPARTMENT_NAME">
        <el-input v-model="form.DEPARTMENT_NAME" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="证件号" prop="IDCARD">
        <el-input v-model="form.IDCARD" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="MOBILE_PHONE">
        <el-input v-model="form.MOBILE_PHONE" :disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="EMAIL">
        <el-input v-model="form.EMAIL" :disabled="disabled"></el-input>
      </el-form-item>
      <center>
          <el-button type="primary" @click="edit()">我要纠错</el-button>
          <el-button type="primary" @click="onSubmit('form')">提交</el-button>
      </center>
    </el-form>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getUserPersonnelInfo, updateUserPersonnelInfo } from '@/api/basicInfoSetting'
export default {
  name: 'publishActive',
  data() {
    var validateEmail = (rule, value, callback) => {
      var pattern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (!pattern.test(value)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }
    var validatePhone = (rule, value, callback) => {
      var pattern = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/
      if (!pattern.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    var validateIdcard = (rule, value, callback) => {
      var pattern = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
      if (!pattern.test(value)) {
        callback(new Error('请输入正确的身份证号'))
      } else {
        callback()
      }
    }
    return {
      form: {
        NAME: '',
        BIRTHDAY: '',
        DEPARTMENT_NAME: '',
        IDCARD: '',
        MOBILE_PHONE: '',
        EMAIL: ''
      },
      disabled: true,
      rules: {
        MOBILE_PHONE: [
          { required: true, validator: validatePhone, trigger: 'blur' }
        ],
        EMAIL: [{ required: true, validator: validateEmail, trigger: 'blur' }],
        IDCARD: [{ required: true, validator: validateIdcard, trigger: 'blur' }]
      },
      loading: false
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  },
  created: function() {
    this.loading = true
    const param = {
      'username': this.name
    }
    getUserPersonnelInfo(param.username).then(response => {
      const data = response.result[0]
      this.form = data
      this.loading = false
    }).catch(error => {
      this.loading = false
      console.log(error)
      this.$message.error('获取数据失败')
    })
  },
  methods: {
    onSubmit(formName) {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          const param = {
            'username': this.name,
            'name': this.form.NAME,
            'birthday': this.form.BIRTHDAY,
            'department_name': this.form.DEPARTMENT_NAME,
            'idcard': this.form.IDCARD,
            'mobile_phone': this.form.MOBILE_PHONE,
            'email': this.form.EMAIL
          }
          updateUserPersonnelInfo(param.username, param.name, param.birthday, param.department_name, param.idcard,
            param.mobile_phone, param.email).then(response => {
            this.loading = false
          }).catch(error => {
            console.log(error)
            this.loading = false
            this.$message.error('数据更新失败')
          })
        } else {
          console.log('error')
        }
      })
    },
    edit() {
      this.disabled = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.line{
  text-align: center;
}
</style>

